<template>
	<view class="bods"  style="padding-bottom: 10rpx;margin-top: 150rpx;">
		<view class="bods">
			<view v-for="(item,index) in busiTripRouteEntityList" class="formcard" :key="index">
				<u-form  labelPosition="left" :model="item">
					<view  style="padding: 25rpx 35rpx;display: flex;width: 100%;margin: 0 auto;  border-bottom:1px solid #e6e6e6;box-sizing: border-box;justify-content: space-between;">
		                 <view class="">
							 <span>行程{{index+1}}</span>
							 <span  @click='moveDown(busiTripRouteEntityList,index)'  v-if="index !== busiTripRouteEntityList.length-1" style='margin-left: 40rpx;color:rgb(0,122,255) ;'>下移</span>
							 <span @click='moveUp(busiTripRouteEntityList,index)' v-if="index!==0" style='margin-left: 40rpx;color:rgb(0,122,255) ;'>上移</span>
						 </view>
		                <view class="">
							<span @click="copyType(item,index)">
								<image style="width: 40rpx;height: 40rpx; margin-left: 230rpx;" src="@/static/newimg/dX.svg" mode="widthFix"></image>
							</span>
							<span  @click="remove(item,index)">
							<image style="width: 40rpx;height: 40rpx;margin-left:20rpx;" src="@/static/newimg/gB.svg" mode="widthFix"></image>
							</span>
						</view>
					</view>
					<u-form-item  required labelWidth="170rpx"   label="出差人"  borderBottom ref="item1" @click="personClick(index)">
						<input class="pdlf" type="text" v-model="item.empNm">
						<!-- <span style='color:rgb(0,122,255);display: inline-block;padding-left: 20rpx;width: 100rpx;'>共2人</span> -->
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<!-- <u-form-item required labelWidth="170rpx"   label="行程类型"  borderBottom ref="item1" >
		              <span class="pdlf">{{item.cityType==0?'境内':'境外'}}</span>
					</u-form-item> -->
					<u-form-item required labelWidth="170rpx" :id="'routeStartDate'+index" :style = "{border:textClass == ('routeStartDate'+index)?'1px solid #539ce7b3':''}"  label="出发时间" borderBottom >
						<!-- <text class="pdlf">2022-3-5 20:30:40</text> -->
						<uni-datetime-picker  class="pdlf" type="datetime" v-model="item.routeStartDate"  :border="false":clear-icon="false" @change="timeDate($event,index)"  placeholder="请选择出发时间" :start="list.startDate" :end="list.endDate">
						 <view class="" style="width: 100%;height: 40rpx;"  slot="date">
							 <input type="text" v-if="!item.routeStartDate" placeholder="请选择出发时间" disabled>
							 {{item.routeStartDate?item.routeStartDate:''}}
						 </view>
						</uni-datetime-picker>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
					</u-form-item>
					<u-form-item @click="cityClick(index,'startLocation',item.cityType)" required labelWidth="170rpx" :id="'startLocation'+index" :style = "{border:textClass == ('startLocation'+index)?'1px solid #539ce7b3':''}"   label="出发地点" borderBottom ref="item1" >
						<text class="pdlf">{{item.startLocation}}</text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
					<u-form-item @click="cityClick(index,'dest',item.cityType)" required labelWidth="170rpx" :id="'dest'+index" :style = "{border:textClass == ('dest'+index)?'1px solid #539ce7b3':''}"   label="到达地点"  borderBottom ref="item1" >
						<text class="pdlf">{{item.dest}}</text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item required labelWidth="170rpx"   label="交通工具"  borderBottom ref="item1"  @click="pickerClick(index)">
						<u-picker @cancel="close()" :show="show" @confirm="confirm($event)" :columns="columns" keyName="label">
						</u-picker>
						<span>{{item.vehicle=='0'?'飞机':''||item.vehicle=='1'?'火车':''||item.vehicle=='2'?'长途及其他':''}}</span>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
                    <view class=""   >
						<u-form-item required labelWidth="170rpx" :id="'descs'+index"  :borderBottom=false  label="行程备注"   ref="item1" >
						</u-form-item>
						<view style="width: 90%;margin: 0 auto;" :style = "{border:textClass == ('descs'+index)?'1px solid #539ce7b3':''}">
							<u--textarea count v-model="item.descs" border='none' placeholder="请输入"></u--textarea>
						</view>
						<view style="height: 20rpx;"></view>
					</view>
					<!-- <u-button @click="submits(index)">提交</u-button> -->
				</u-form>
			</view>
		</view>
		<view class="addbtn">
			<view style='width: 90%;margin: 20rpx auto;'>
				<view class="update" @click="addtripy()">
					<p>
						<image src="@/static/newimg/tJ.svg" mode=""></image>
						<span style='color: #007aff;padding-left: 10rpx;'>添加行程</span>
					</p>
				</view>
			</view>
		</view>
		<!-- <view>
			<view class="bottom_setup">
				<view class="bottom_white">
					<u-button @click="headback"  class="custom-styles" :plain="true" type="primary" :text="backtitle"></u-button>
					<u-button @click="ngtocost(next)" class="custom-style" type="primary" :text="nexttitle"></u-button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue';
	import formdrem from '@/workspaces/tools/formdrem.vue';
	import Nextbtn from '@/workspaces/tools/nextbtn.vue';
	import storkeVerification from "./cmmon/strokeVerification/strokeVerification.js"
	export default {
		mixins:[storkeVerification],
		props:['list'],
		data() {
			return {
				removEmpNoList:[],//删除的人
				addEmpNoList:[],//增加的人
				datetimesingle:'',
				pickindex:'',
				value1:'',
				showSex: false,
				busiTripRouteEntityList:[],//行程实际
				show: false,
				columns: [
				    [
					{
				        label: '飞机',
				        id: '0'
				     },
					 {
					     label: '火车',
					     id: '1'
					  },
					  {
					      label: '长途及其他',
					      id: '2'
					   },
				    ],
					],
				tit:[
					{name:'基本信息'},
					{name:'行程计划'},
					{name:'费用预算'},
					{name:'确认提交'},
				],
				busiTripRouteEntityList:[],
				model:'',
				backtitle:'上一步(基本信息)',
				nexttitle:'下一步(费用预算)',
				next:'./Budget',
				appId: "",
				wiid: "",
				formAction: "",
				taskId: "",
				wfContext: {},
				isReadOnly: false
			};
		},
		mounted(option) {
           let _this = this;
		   window.myvm = _this;
		   window.$urlFormVue = _this;
		   if(_this.list.busiTripRouteEntityList.length>0){
			   _this.busiTripRouteEntityList = _this.list.busiTripRouteEntityList;
		   };
			_this.busiTripRouteEntityList.map((item,index)=>{
			 	item.cityType = _this.list.destination;
			});
			_this.busiTripRouteEntityList[0].routeStartDate = _this.list.startDate;
			_this.busiTripRouteEntityList[_this.busiTripRouteEntityList.length-1].routeStartDate = _this.list.endDate;
			
			//获取流程页面的流程上下文[实用的流程信息从这里获取]
			_this.wfContext = window.parent.myvm.wfContext;
			console.info(_this.wfContext);
			//流程应用定义ID
			var appId = Object.toQueryString("appId") || "";
			//流程实例ID
			var wiid = Object.toQueryString("wiid") || "";
			if (wiid == "") {
			  wiid = _this.wfContext.WorkflowInstanceId;
			}
			//  当前页面状态：0未有实例，2待办，3查看,4待阅
			var formAction = Object.toQueryString("formAction") || 0;
			//待办任务ID，待办时才有此参数
			var taskId = Object.toQueryString("taskId") || "";
			if (formAction > 2) {
			  _this.isReadOnly = true;
			}
			_this.appId = appId;
			_this.wiid = wiid;
			_this.formAction = formAction;
			_this.taskId = taskId;
		},
		methods:{
			//选择出差申请人
			personClick(index){
				uni.navigateTo({
					url:'../../components/components/personnelList?num=1&trip='+index
				})
			},
			//城市选择
			cityClick(index,name,cityType){
				uni.navigateTo({
					url:'../../components/components/cityList?name='+name+'&trip='+index+'&cityType='+cityType
				})
			},
			moveUp(list, index) {
			    if (index != 0) {
			      list[index] = list.splice(index - 1, 1, list[index])[0];
			    } else {
			      list.push(list.shift());
			    }
			  },
			rightClick(){
				console.log(1)
			},
			handback(){
				uni.navigateBack()
			},
			handbudget(){
				this.$jump('./Budget', 'navigate');
				
			},
			// 时间选择
			timeDate(e,index){
				let _this = this;
				if(e.length>11){
					_this.$set(_this.busiTripRouteEntityList[index],'routeStartDate',e);
				}else{
					_this.$set(_this.busiTripRouteEntityList[index],'routeStartDate',e+'00:00:00');
				}
			},
			// 取消类型弹框
			close(){
				this.show =false;
			},
			pickerClick(index){
				this.pickindex = index;
				this.show = true;
			},
			//选择交通类型触发
			confirm(e){
				let _this = this;
				let index =  _this.pickindex;
				_this.$set(_this.busiTripRouteEntityList[index],'vehicle',e.value[0].id);
				_this.pickindex = "";
				_this.show = false;
			},
			// 上移
			moveUp(list, index) {
			    if (index != 0) {
			      list[index] = list.splice(index - 1, 1, list[index])[0];
			    } else {
			      // list.push(list.shift());
			    }
			},
			// 下移
			moveDown(list, index) {
				if (index != list.length - 1) {
				    list[index] = list.splice(index + 1, 1, list[index])[0];
				  } else {
					return false
				  }
				},
			// 添加行程
			addtripy(){
				this.busiTripRouteEntityList.push({					
						routeStartDate:'',//	出发时间
						startLocation:'',//	出发地点
						dest:'',//	到达地点
						empNm:this.list.empNm,//	申请人
						empNo:this.list.empNo,//	申请人工号
						descs:'',//	备注
						vehicle:'0',//	交通工具,-1全部,0飞机,1火车,2长途及其他
						creator:'',//	创建人
						createdDate:'',//	创建时间
						modifier:'',//	更新人
						lastUpdatedDate:'',//	更新时间
					    cityType:'0',//行程类型
				})
			},
			// 复制
			copyType(item,index){
				let indexLength =  this.busiTripRouteEntityList.length;
				let copyList = JSON.parse(JSON.stringify(item));
				this.$set(this.busiTripRouteEntityList,indexLength,copyList);
			},
			// 删除
			remove(item,index){
				this.busiTripRouteEntityList.splice(index,1);
			}
		},
		components:{
			Setps,
			formdrem,
			Nextbtn
		}
	}
</script>

<style lang="scss" scoped>
view{
	font-family: pf
}
.btn{
	width: 90%;
	margin: 0 auto;
}
.addbtn{
	width: 90%;
	background-color: white;
	margin: 0 auto;
	margin-bottom: 50rpx;
	// height: 100rpx;
	padding: 10rpx 0;
	box-sizing: border-box;
}
.update {
		width: 100%;
		height: 80rpx;
		border: 1px solid #007aff;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		p {			
			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}
.bottom_setup{
		width: 100%;
		background-color: white;
		box-shadow: 5px -10rpx 5px 0px rgba(225, 225, 225,.4),;
		position: fixed;
		bottom: 0;
		.bottom_white{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			// height: 150rpx;
			.custom-styles{
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
			}
			.custom-style{
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
			}
		}
	}
	.bods {
		height: auto;
		background-color: rgb(248, 249, 251);
		width: 100%;
	}
	/* .formcard{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 16rpx;
		background-color: white;
		border-radius:8px;
		font-size: 28rpx;
		box-sizing: border-box;
		input{
			font-size: 28rpx;
		}
	} */
	.pdlf{
		width: 100%;
	}
	.u-textarea {
		background-color: #fafafa;
		margin: 10rpx 0;
	}
</style>
